<template>
  <div class="tool-section" :class="{ 'dark-mode': isDarkMode }">
    <!-- 上传区域 -->
    <div class="upload-section" v-if="showUpload">
      <el-upload
        class="upload-area"
        :class="{ 'dark-mode': isDarkMode }"
        drag
        action="#"
        :auto-upload="false"
        :multiple="multiple"
        :accept="accept"
        :on-change="handleFileChange"
        :show-file-list="showFileList"
      >
        <el-icon class="upload-icon">
          <component :is="uploadIcon" />
        </el-icon>
        <div class="upload-text">
          {{ uploadText }}
        </div>
        <div class="upload-tip" v-if="uploadTip">
          {{ uploadTip }}
        </div>
      </el-upload>
    </div>

    <!-- 文件预览区域 -->
    <div class="preview-section" v-if="$slots.preview">
      <slot name="preview"></slot>
    </div>

    <!-- 选项配置区域 -->
    <div class="options-section" v-if="$slots.options">
      <div class="options-container" :class="{ 'dark-mode': isDarkMode }">
        <slot name="options"></slot>
      </div>
    </div>

    <!-- 操作按钮区域 -->
    <div class="actions-section" v-if="$slots.actions">
      <div class="actions-container">
        <slot name="actions"></slot>
      </div>
    </div>

    <!-- 进度显示区域 -->
    <div class="progress-section" v-if="showProgress && progress > 0">
      <div class="progress-container" :class="{ 'dark-mode': isDarkMode }">
        <el-progress 
          :percentage="progress" 
          :status="progressStatus"
          :stroke-width="8"
          :show-text="true"
        />
        <p class="progress-text" v-if="progressText">{{ progressText }}</p>
      </div>
    </div>

    <!-- 结果展示区域 -->
    <div class="result-section" v-if="$slots.result">
      <slot name="result"></slot>
    </div>

    <!-- 自定义内容区域 -->
    <div class="custom-section" v-if="$slots.default">
      <slot></slot>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import { UploadFilled } from '@element-plus/icons-vue'

interface Props {
  showUpload?: boolean
  uploadText?: string
  uploadTip?: string
  uploadIcon?: any
  accept?: string
  multiple?: boolean
  showFileList?: boolean
  showProgress?: boolean
  progress?: number
  progressStatus?: string
  progressText?: string
}

const props = withDefaults(defineProps<Props>(), {
  showUpload: true,
  uploadText: '拖拽文件到此处或点击上传',
  uploadTip: '',
  uploadIcon: UploadFilled,
  accept: '*',
  multiple: false,
  showFileList: false,
  showProgress: false,
  progress: 0,
  progressStatus: '',
  progressText: ''
})

const emit = defineEmits<{
  fileChange: [file: any, fileList?: any[]]
}>()

const isDarkMode = ref(false)

// 检测主题变化
const checkTheme = () => {
  const htmlElement = document.documentElement
  isDarkMode.value = htmlElement.classList.contains('dark')
}

// 监听主题变化
let observer: MutationObserver | null = null

onMounted(() => {
  checkTheme()
  
  observer = new MutationObserver(() => {
    checkTheme()
  })
  
  observer.observe(document.documentElement, {
    attributes: true,
    attributeFilter: ['class']
  })
})

onUnmounted(() => {
  if (observer) {
    observer.disconnect()
  }
})

const handleFileChange = (file: any, fileList?: any[]) => {
  emit('fileChange', file, fileList)
}
</script>

<style scoped>
.tool-section {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* 上传区域样式 */
.upload-section {
  width: 100%;
}

.upload-area {
  width: 100%;
}

.upload-area :deep(.el-upload) {
  width: 100%;
}

.upload-area :deep(.el-upload-dragger) {
  width: 100%;
  height: 180px;
  background: var(--el-bg-color-page, #fafbfc);
  border: 2px dashed var(--el-border-color, #dcdfe6);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.upload-area.dark-mode :deep(.el-upload-dragger) {
  background: var(--el-bg-color-page, #1a1b1c);
  border-color: var(--el-border-color, #4c4d4f);
}

.upload-area :deep(.el-upload-dragger:hover) {
  border-color: var(--el-color-primary, #409eff);
  background: var(--el-color-primary-light-9, #ecf5ff);
}

.upload-area.dark-mode :deep(.el-upload-dragger:hover) {
  background: rgba(64, 158, 255, 0.1);
}

.upload-area :deep(.el-upload-dragger.is-dragover) {
  border-color: var(--el-color-primary, #409eff);
  background: var(--el-color-primary-light-9, #ecf5ff);
  transform: scale(1.02);
}

.upload-icon {
  font-size: 48px;
  color: var(--el-color-primary, #409eff);
  margin-bottom: 16px;
  transition: all 0.3s ease;
}

.upload-text {
  font-size: 16px;
  color: var(--el-text-color-primary, #303133);
  margin-bottom: 8px;
  font-weight: 500;
  transition: color 0.3s ease;
}

.upload-tip {
  font-size: 14px;
  color: var(--el-text-color-regular, #606266);
  transition: color 0.3s ease;
}

/* 预览区域样式 */
.preview-section {
  background: var(--el-bg-color, #ffffff);
  border-radius: 12px;
  padding: 24px;
  border: 1px solid var(--el-border-color-light, #e4e7ed);
  transition: all 0.3s ease;
}

.tool-section.dark-mode .preview-section {
  background: var(--el-bg-color, #1d1e1f);
  border-color: var(--el-border-color, #4c4d4f);
}

/* 选项配置区域样式 */
.options-section {
  background: var(--el-bg-color, #ffffff);
  border-radius: 12px;
  border: 1px solid var(--el-border-color-light, #e4e7ed);
  transition: all 0.3s ease;
  overflow: hidden;
}

.tool-section.dark-mode .options-section {
  background: var(--el-bg-color, #1d1e1f);
  border-color: var(--el-border-color, #4c4d4f);
}

.options-container {
  padding: 24px;
}

.options-container :deep(.el-form-item) {
  margin-bottom: 20px;
}

.options-container :deep(.el-form-item__label) {
  font-weight: 500;
  color: var(--el-text-color-primary, #303133);
  margin-bottom: 8px;
}

.options-container :deep(.el-input),
.options-container :deep(.el-select),
.options-container :deep(.el-slider) {
  transition: all 0.3s ease;
}

.options-container :deep(.el-input__wrapper) {
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.options-container.dark-mode :deep(.el-input__wrapper) {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* 操作按钮区域样式 */
.actions-section {
  display: flex;
  justify-content: center;
}

.actions-container {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
}

.actions-container :deep(.el-button) {
  min-width: 120px;
  height: 44px;
  border-radius: 8px;
  font-weight: 500;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.actions-container :deep(.el-button:hover) {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.actions-container :deep(.el-button--primary) {
  background: linear-gradient(135deg, #409eff 0%, #3a8ee6 100%);
  border: none;
}

.actions-container :deep(.el-button--success) {
  background: linear-gradient(135deg, #67c23a 0%, #5daf34 100%);
  border: none;
}

.actions-container :deep(.el-button--warning) {
  background: linear-gradient(135deg, #e6a23c 0%, #cf9236 100%);
  border: none;
}

/* 进度显示区域样式 */
.progress-section {
  background: var(--el-bg-color, #ffffff);
  border-radius: 12px;
  border: 1px solid var(--el-border-color-light, #e4e7ed);
  transition: all 0.3s ease;
}

.tool-section.dark-mode .progress-section {
  background: var(--el-bg-color, #1d1e1f);
  border-color: var(--el-border-color, #4c4d4f);
}

.progress-container {
  padding: 24px;
  text-align: center;
}

.progress-container :deep(.el-progress-bar__outer) {
  border-radius: 8px;
  background: var(--el-border-color-light, #e4e7ed);
}

.progress-container.dark-mode :deep(.el-progress-bar__outer) {
  background: var(--el-border-color, #4c4d4f);
}

.progress-container :deep(.el-progress-bar__inner) {
  border-radius: 8px;
  background: linear-gradient(90deg, #409eff 0%, #3a8ee6 100%);
}

.progress-text {
  margin-top: 16px;
  font-size: 14px;
  color: var(--el-text-color-regular, #606266);
  font-weight: 500;
}

/* 结果展示区域样式 */
.result-section {
  background: var(--el-bg-color, #ffffff);
  border-radius: 12px;
  padding: 24px;
  border: 1px solid var(--el-border-color-light, #e4e7ed);
  transition: all 0.3s ease;
}

.tool-section.dark-mode .result-section {
  background: var(--el-bg-color, #1d1e1f);
  border-color: var(--el-border-color, #4c4d4f);
}

/* 自定义内容区域样式 */
.custom-section {
  background: var(--el-bg-color, #ffffff);
  border-radius: 12px;
  padding: 24px;
  border: 1px solid var(--el-border-color-light, #e4e7ed);
  transition: all 0.3s ease;
}

.tool-section.dark-mode .custom-section {
  background: var(--el-bg-color, #1d1e1f);
  border-color: var(--el-border-color, #4c4d4f);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .tool-section {
    gap: 20px;
  }
  
  .upload-area :deep(.el-upload-dragger) {
    height: 150px;
  }
  
  .upload-icon {
    font-size: 40px;
    margin-bottom: 12px;
  }
  
  .upload-text {
    font-size: 15px;
  }
  
  .preview-section,
  .options-container,
  .progress-container,
  .result-section,
  .custom-section {
    padding: 20px;
  }
  
  .actions-container {
    flex-direction: column;
    align-items: stretch;
  }
  
  .actions-container :deep(.el-button) {
    width: 100%;
    min-width: auto;
  }
}

@media (max-width: 480px) {
  .tool-section {
    gap: 16px;
  }
  
  .upload-area :deep(.el-upload-dragger) {
    height: 120px;
  }
  
  .upload-icon {
    font-size: 36px;
    margin-bottom: 8px;
  }
  
  .upload-text {
    font-size: 14px;
  }
  
  .preview-section,
  .options-container,
  .progress-container,
  .result-section,
  .custom-section {
    padding: 16px;
  }
}
</style> 